<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:ic="http://ivyteam.ch/jsf/component"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Sign up</title>
	<script type="text/javascript" src="rest/ivyajaxapi.js"></script>
</h:head>
<h:body>
	<ui:composition
		template="../template/basicTemplate/basicTemplate.xhtml">
		<ui:define name="title">
        Registration
    	</ui:define>
		<ui:define name="header">
        Registration Form
    	</ui:define>
		<ui:define name="center">
			<h:form id="signForm" >
				<h:panelGroup>
					<h:panelGrid columns="2">
						<h:panelGrid columns="2" cellpadding="3" columnClasses="label-top"
							id="Person">
							<p:outputLabel
								value="#{ivy.cms.co('/ch/ivy/demo/label/firstName')}"
								for="firstname" />
							<p:inputText value="#{data.userInfo.firstName}" id="firstname"
								required="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}" />
							<span></span>
							<p:message for="firstname" />
							<p:outputLabel
								value="#{ivy.cms.co('/ch/ivy/demo/label/LastName')}"
								for="lastname" />
							<p:inputText value="#{data.userInfo.firstName}" id="lastname"
								required="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}" />
							<span></span>
							<p:message for="lastname" />
							<p:outputLabel
								value="#{ivy.cms.co('/ch/ivy/demo/label/username')}" for="Name" />
							<p:inputText value="#{data.userInfo.userName}" id="Name"
								required="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}" />
							<span></span>
							<p:message for="Name" />

							<p:outputLabel
								value="#{ivy.cms.co('/ch/ivy/demo/label/password')}"
								for="txtPassword" />
							<p:password required="true" id="txtPassword" redisplay="true"
								inline="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}"
								value="#{data.userInfo.password}"></p:password>
							<span></span>
							<p:message id="txtPasswordMessage" for="txtPassword" />

							<p:outputLabel
								value="#{ivy.cms.co('/ch/ivy/demo/label/birthdate')}"
								for="Birthday" />
							<p:calendar value="#{data.userInfo.birthdate}" id="Birthday"
								navigator="true" showOn="both" showButtonPanel="true"
								pattern="dd.MM.yyyy" required="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}">
								<!-- <p:ajax event="dateSelect" listener="#{logic.handleDateSelect}" />  -->
								<f:convertDateTime pattern="dd.MM.yyyy" />
							</p:calendar>
							<span></span>
							<p:message for="Birthday" />


						</h:panelGrid>
						<h:panelGrid style="margin-left:30px;" columns="2" cellpadding="3"
							columnClasses="label-top">
							<p:outputLabel value="#{ivy.cms.co('/ch/ivy/demo/label/email')}"
								for="email" />
							<p:inputText value="#{data.userInfo.email}" id="email"
								required="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}"
								validatorMessage="#{ivy.cms.co('/ch/ivy/demo/error/EmailInvalid')}">
								<f:validateRegex pattern=".+@.+\.[a-zA-Z]+">
								</f:validateRegex>

							</p:inputText>
							<span></span>
							<p:message for="email" />

							<p:outputLabel value="#{ivy.cms.co('/ch/ivy/demo/label/phone')}"
								for="PhoneNumber" />
							<p:inputMask value="#{data.userInfo.phone}" id="PhoneNumber"
								mask="999 999 99 99"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}"
								validatorMessage="Phone number is invalid" />

							<span></span>
							<p:spacer width="10"></p:spacer>
							<p:outputLabel
								value="#{ivy.cms.co('/ch/ivy/demo/label/country')}"
								for="Country" />
							<p:autoComplete value="#{data.userInfo.countries}" id="Country"
								forceSelection="true" completeMethod="#{logic.completeCountry}"
								delay="0" required="true" multiple="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}" />
							<span></span>
							<p:message for="Country" />

							<p:outputLabel value="#{ivy.cms.co('/ch/ivy/demo/label/dep')}"
								for="dep" />
							<p:selectOneMenu id="dep" required="true" style="width:140px;"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}"
								value="#{data.userInfo.department}" var="p">
								<f:selectItem
									itemLabel="#{ivy.cms.co('/ch/ivy/demo/label/pleaseSelect')}"
									itemValue="" />
								<f:selectItems value="#{data.listDep}" var="dep"
									itemLabel="#{dep}" itemValue="#{dep}" />
							</p:selectOneMenu>
							<span></span>
							<p:message for="dep" />
							<p:outputLabel value="#{ivy.cms.co('/ch/ivy/demo/label/Sex')}"
								for="sex" />
							<p:selectOneRadio id="sex" value="#{data.userInfo.sex}"
								required="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}">
								<f:selectItem
									itemLabel="#{ivy.cms.co('/ch/ivy/demo/label/Female')}"
									itemValue="0" />
								<f:selectItem
									itemLabel="#{ivy.cms.co('/ch/ivy/demo/label/Male')}"
									itemValue="1" />
							</p:selectOneRadio>
							<span></span>
							<p:message for="sex" />
						</h:panelGrid>
						<!-- <h:panelGrid columns="2">
							<p:selectBooleanCheckbox id="agreement" required="true"
								requiredMessage="#{ivy.cms.co('/ch/ivy/demo/error/required')}"
								value="#{data.agreePolicy}" widgetVar="autoRefresh">
								<f:validateRequired for="agreement"></f:validateRequired>
							</p:selectBooleanCheckbox>
							<h:outputLabel
								value="#{ivy.cms.co('/ch/ivy/demo/label/agreement')}"
								for="agreement"></h:outputLabel>
							<span></span>
							<p:message for="agreement" />
						</h:panelGrid> -->
					</h:panelGrid>
				</h:panelGroup>
				<!-- <h:outputLabel value="#{data.succesfullMessage}" styleClass="center"/><br/> -->
				<p:commandButton id="btnRegist" actionListener="#{logic.register}"
					value="#{ivy.cms.co('/ch/ivy/demo/label/btnNext')}"
					update="signForm"></p:commandButton>
				<p:commandButton id="btnLogin" actionListener="#{logic.login}"
					value="#{ivy.cms.co('/ch/ivy/demo/label/cancel')}" process="@none"></p:commandButton>
			</h:form>


		</ui:define>
	</ui:composition>
</h:body>

</html>